import { useState, useEffect, useRef } from "react";
import {
	Modal,
	Alert,
	Form,
	Radio,
	Button,
	Card,
	Switch,
	Row,
	Col,
	Space,
	Select,
	Typography,
	Popover,
	Divider,
	Input
} from "antd";
import { SettingTwoTone, FolderOpenTwoTone } from "@ant-design/icons";
import { CommonModal } from "@/views/components/CommonModal";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import { CommonField } from "@/pages/OrderModule/common/components/CommonForm";
import { QuestionCircleOutlined, PlusOutlined } from "@ant-design/icons";

const defaultOptions = () => [
	{ label: "30天", value: 1 },
	{ label: "60天", value: 2 },
	{ label: "180天", value: 3 },
	{ label: "一年", value: 4 },
	{ label: "两年", value: 5 },
	{ label: "891天", value: 6 }
];
const CheckGoodsModal = props => {
	const {} = props;
	const [form] = Form.useForm();

	const [options1, setOptions1] = useState(defaultOptions());
	const [options2, setOptions2] = useState(defaultOptions());
	const [options3, setOptions3] = useState(defaultOptions());
	const handleOk = () => {
		props.onCancel();
	};

	const RowSelect = props => {
		// const inputRef = useRef(null);
		// const onNameChange = event => {
		// 	setName(event.target.value);
		// };
		// const addItem = () => {
		// 	setItems([...items, { label: props.value, value: items.length + 1 }]);
		// 	setName("");
		// 	setTimeout(() => {
		// 		inputRef.current?.focus();
		// 	}, 0);
		// };
		return (
			<Select
				{...props}
				style={{
					width: 120
				}}
				dropdownRender={menu => (
					<>
						{menu}
						<div className="flx-justify-between" style={{ padding: 10 }}>
							<Input placeholder="自定义天数" value={props.value} onChange={props.onChange} />
							<Button type="link" onClick={props.addItem}>
								添加
							</Button>
						</div>
					</>
				)}
				options={options1}
			/>
		);
	};

	return (
		<CommonModal
			title={{ title: "检测无用商品" }}
			open={true}
			width="528px"
			okText="保存"
			onCancel={props.onCancel}
			footer={
				<Row justify="space-between" style={{ alignItems: "center" }}>
					<Col className="common-color11">
						预计可删除 <span className="common-color9"> 0 </span>条
					</Col>
					<Col>
						<Space>
							<Button size="middle" onClick={props.onCancel}>
								取消
							</Button>
							<Button size="middle" onClick={props.onCancel}>
								仅查看
							</Button>
							<Button size="middle" type="primary" onClick={handleOk}>
								全部删除
							</Button>
						</Space>
					</Col>
				</Row>
			}
		>
			<Form form={form} name="scan-recharge-modal">
				<SubTitle
					symbol
					as="s2"
					title={<>清理范围设置</>}
					extraText="（同时满足以下条件为无用商品）"
					wrapStyle={{ marginBottom: 16 }}
				/>
				<Row gutter={[12, 6]}>
					<Col span={12}>
						<Form.Item name="">
							<CommonField Component={Select} props={{ placeholder: "创建时间超过", options: [{ label: "30天", value: 30 }] }} />
						</Form.Item>
					</Col>
					<Col span={12}>
						<Form.Item name="">
							<CommonField
								Component={Select}
								props={{ placeholder: "累计无销量超过", options: [{ label: "30天", value: 30 }] }}
							/>
						</Form.Item>
					</Col>
					<Col span={24}>
						<div className="flex">
							<span className="mr10">库存无变动，超过</span>
							<Form.Item name="todo1" style={{ marginBottom: 0 }}>
								<RowSelect />
								{/* <CommonField
									Component={Select}
									props={{ placeholder: "选择时间", options: [{ label: "30天", value: 30 }] }}
									style={{ width: 120 }}
								/> */}
							</Form.Item>
							<span className="ml10">时不计入</span>
						</div>
					</Col>
					<Col span={24}>
						<div className="flx-justify-between">
							<span>
								线上店铺不存在的商品
								<Popover content="无对应店铺商品的系统商品">
									<QuestionCircleOutlined />
								</Popover>
							</span>
							<Form.Item name="" style={{ marginBottom: 0 }}>
								<Switch />
							</Form.Item>
						</div>
					</Col>
					<Col span={24}>
						<div className="flx-justify-between">
							<span>
								商品有库存时保留商品
								<Popover content="无对应店铺商品的系统商品">
									<QuestionCircleOutlined />
								</Popover>
							</span>
							<Form.Item name="todo9" style={{ marginBottom: 0 }}>
								<Switch defaultChecked />
							</Form.Item>
						</div>
					</Col>
					<Col span={24}>
						<div className="flx-justify-between">
							款内任意商品有销量则款内所有商品均保留
							<Form.Item name="todo10" style={{ marginBottom: 0 }}>
								<Switch defaultChecked />
							</Form.Item>
						</div>
					</Col>
				</Row>
			</Form>
		</CommonModal>
	);
};
export default CheckGoodsModal;
